{% extends 'base_dashboard.html' %}

{% block title %}Unlock exam — {{ program.title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <h4 class="fw-bold mb-1">Exam unlock</h4>
    <p class="text-muted mb-4">{{ program.title }}</p>

    {% if application.exam_mode == 'center' and application.schedule_slot %}
    <div class="alert alert-primary border-0 small">
      <strong>In-person booking:</strong> {{ application.testing_center.name }} —
      {{ application.schedule_slot.label }}<br>
      {{ application.testing_center.address }}
      {% if application.testing_center.map_url %}
        · <a href="{{ application.testing_center.map_url }}" target="_blank" rel="noopener">Map</a>
      {% endif %}
    </div>
    {% endif %}

    <div class="card border-0 shadow-sm rounded-4 mb-4">
      <div class="card-body p-4">
        {% if application.exam_mode == 'center' %}
        <h6 class="fw-bold">1. Arrive at the testing center</h6>
        <p class="small text-muted">
          Bring a valid ID. On-site staff / teacher will verify you and give you a one-time unlock code.
        </p>
        {% if application.testing_center.directions %}
          <div class="small mb-3 p-3 rounded-3" style="background:#f8fafc;white-space:pre-line;">{{ application.testing_center.directions }}</div>
        {% endif %}
        {% else %}
        <h6 class="fw-bold">1. Join the teacher / consultant meeting</h6>
        {% if program.meeting_instructions %}
          <div class="small mb-3 p-3 rounded-3" style="background:#f8fafc;white-space:pre-line;">{{ program.meeting_instructions }}</div>
        {% else %}
          <p class="small text-muted">Your academy will share a Zoom/Meet link. Stay on camera while you take the exam.</p>
        {% endif %}
        {% if latest_session and latest_session.meeting_url and latest_session.is_valid %}
          <a href="{{ latest_session.meeting_url }}" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm mb-2">
            Open meeting link
          </a>
        {% endif %}
        {% endif %}

        <hr class="my-4">

        <h6 class="fw-bold">2. Enter the unlock code</h6>
        <p class="small text-muted">The teacher generates a one-time code and shares it with you.</p>
        <form method="post" class="mt-3">
          {% csrf_token %}
          <label class="form-label fw-semibold">{{ form.code.label }}</label>
          {{ form.code }}
          {% if form.code.errors %}<div class="text-danger small">{{ form.code.errors.0 }}</div>{% endif %}
          <button class="btn btn-success w-100 mt-3 fw-semibold">Unlock exam</button>
        </form>
      </div>
    </div>

    <a href="{% url 'certifications:schedule' application.pk %}" class="btn btn-link">Change schedule</a>
    <a href="{% url 'certifications:my_certs' %}" class="btn btn-link">← Back</a>
  </div>
</div>
{% endblock %}